<template>
	<view class="box">
		<uni-nav-bar left-icon="back" style="border-bottom: none;" title="关注店铺" fixed="true" status-bar="true" @clickLeft="back">
			<view class="right" slot="right">
				<view @click="onManger">{{text}}</view>
			</view>
		</uni-nav-bar>
		<view class="list">
			<view class="item" v-for="(item,indx) in bigShopList" :key="item.id" >
				<view class="select" v-show="mangerStatus">
					<u-checkbox-group>
						<u-checkbox v-model="checked" shape="circle" active-color="#FE5900"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="top">
					<view class="shopName">
						<view class="left">
							<view class="imgbox">
								<image :src="item.imgUrl" mode="" style="width:50upx;height: 50upx;"></image>
							</view>

							<view class="text">{{ item.name }}</view>
						</view>
						<view class="right" @click="toPage(0,'/pages/shop/shopDetail/shopDetail?id=')">
							进入店铺
						</view>
					</view>
					<view class="intro">
						{{item.info}}
					</view>
				</view>
				<view class="center">
					<view class="banner">
						<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true"
						 cancelable="false" :indicator-color="indicatorColor" :indicator-active-color="indicatorActive" class="swiper-box">
							<swiper-item v-for="(items, index) in item.slides" :key="index">
								<navigator :url="'/pages/index/index?id='+items.id" open-type="navigate" hover-class="other-navigator-hover" class="swiper-item">
									<image :src="items.img" mode=""></image>
								</navigator>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view class="bottom">
						<scroll-view class="scroll-view_H" scroll-x="true">
							<image :src="it.url" class="img" v-for="(it,idx) in item.scrollList" :key="item.id"
							></image>
						</scroll-view>
				</view>
			</view>
		</view>
		<view class="mangerBox" v-show="mangerStatus"></view>
		<view class="bottomBox" v-show="mangerStatus">
			<u-checkbox-group>
				<u-checkbox v-model="checked" shape="circle" active-color="#FE5900">全选</u-checkbox>
			</u-checkbox-group>
			<view class="btn">删除</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text:'管理',
				mangerStatus:false,
				checked:false,
				slides: [require('../../static/img/changePhoto.jpg'), require('../../static/img/changePhoto.jpg'), require(
					'../../static/img/changePhoto.jpg')],
				indicatorDots: true,
				indicatorColor: '#000',
				indicatorActive: '#fefefe',
				autoplay: true,
				interval: 4000,
				duration: 500,
				bigShopList:[
					{
						shopId:2,
						name:'黑其外贸店',
						imgUrl:'../../static/img/chart1.png',
						info:'外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸',
						slides:[
							{
								id:1,
								img:'../../static/img/changePhoto.jpg'
								
							}
						],
						scrollList:[
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
						]
					},
					{
						shopId:2,
						name:'黑其外贸店',
						imgUrl:'../../static/img/chart1.png',
						info:'外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸',
						slides:[
							{
								id:1,
								img:'../../static/img/changePhoto.jpg'
							}
						],
						scrollList:[
							{
								id:2,
								url:'../../static/img/buy.png'
							},
							{
								id:2,
								url:'../../static/img/buy.png'
							},
							{
								id:2,
								url:'../../static/img/buy.png'
							},
							{
								id:2,
								url:'../../static/img/buy.png'
							},
							{
								id:2,
								url:'../../static/img/buy.png'
							},
							{
								id:2,
								url:'../../static/img/buy.png'
							},
						]
					},
				]
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
           onManger(){
			   if(this.text == '管理'){
				   this.text = '完成'
			   }else{
				   this.text = '管理'
			   }
			   this.mangerStatus = !this.mangerStatus
		   }
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>
